import React from 'react'
import PropTypes from 'prop-types'
import {Avatar, Button, Table} from 'antd'
import {Link} from 'react-router-dom'
import config from 'config'
import classnames from 'classnames'
import {getCustomerLink, getOperatorLink} from 'utils/tabs'
import AnimTableBody from 'components/DataTable/AnimTableBody'
import styles from './List.less'

const List = ({
                openTab, dispatch, onCreateOrder, isMotion, ...tableProps
              }) => {

  const getAvatarText = (record) => {
    const {nickName, wxId} = record
    if (nickName) {
      return nickName.substr(nickName.length - 1, nickName.length)
    } else {
      return wxId ? wxId.substr(0, 1).toUpperCase() : 'D'
    }
  }

  const friendCirlePermission = ['被我屏蔽是', '对方屏蔽我', '互相屏蔽', '正常']

  const columns = [
    {
      title: '头像',
      dataIndex: 'icon',
      key: 'icon',
      width: 100,
      fixed: 'left',
      render: (icon, record, index) => icon ? <Avatar src={icon} size="large"/> :
        <Avatar style={{backgroundColor: config.randomColor(index), verticalAlign: 'middle'}}
                size="large">{getAvatarText(record)}</Avatar>,
    }, {
      title: '好友微信号',
      dataIndex: 'dfriendWxNo',
      key: 'dfriendWxNo',
      width: 120,
      fixed: 'left',
      render: (val, record) => getCustomerLink({
        cid: record.id,
        owxId: record.operatorWxId ? record.operatorWxId.wxId : "",
        name: record.friendRemark || record.friendNickname,
        val: val ? val : record.dfriendWxId,
      }, dispatch),
    }, {
      title: '好友昵称',
      dataIndex: 'friendNickname',
      key: 'friendNickname',
      width: 120,
    }, {
      title: '好友备注',
      dataIndex: 'friendRemark',
      key: 'friendRemark',
      width: 120,
      render: val => val ? val : '-',
    }, {
      title: '订单次数',
      dataIndex: 'orderCount',
      key: 'orderCount',
      width: 100,
      render: val => val ? val : 0,
    }, {
      title: '成交总金额',
      dataIndex: 'transactionAmount',
      key: 'transactionAmount',
      width: 100,
      render: (val) => (val ? val : 0) + '元',
    }, {
      title: '未联系天数',
      dataIndex: 'uncontactDays',
      key: 'uncontactDays',
      width: 100,
      render: val => (val ? val : 0) + '天',
    }, {
      title: '归属微信',
      dataIndex: 'operatorWxId',
      key: 'operatorWxId',
      width: 120,
      render: (val) => getOperatorLink({wxId: val ? val.wxId : "", wxNo: val ? val.wxNo : ""}, dispatch),
    }, {
      title: '归属员工',
      dataIndex: 'operatorWxId',
      key: 'belongEmpName',
      width: 150,
      render: (val) => {
        if (val && val.belongEmp) {
          return val.belongEmp.name
        }

        return '-'
      },
    }, {
      title: '公司部门',
      dataIndex: 'operatorWxId',
      key: 'deptName',
      width: 180,
      render: (val) => {
        if (val && val.dept) {
          return val.dept.name
        }

        return '-'
      },
    }, {
      title: '请求添加好友时间',
      dataIndex: 'requireBecomeFriendTime',
      key: 'requireBecomeFriendTime',
      width: 120,
    }, {
      title: '通过好友日期',
      dataIndex: 'becomeFriendTime',
      key: 'becomeFriendTime',
      width: 100,
    }, {
      title: '广告获客渠道',
      dataIndex: 'adAcquireChannel',
      key: 'adAcquireChannel',
      width: 100,
      render: val => val ? val.name : '-',
    }, {
      title: '性别',
      dataIndex: 'gender',
      key: 'gender',
      width: 100,
      render: val => val === 1 ? '男' : val === 2 ? '女' : '未知',
    }, {
      title: '省份/城市',
      dataIndex: 'region',
      key: 'region',
      width: 100,
      render: val => val ? val : '-',
    }, {
      title: '个性签名',
      dataIndex: 'signature',
      key: 'signature',
      width: 100,
      render: val => val ? val : '-',
    }, {
      title: '是否星标',
      dataIndex: 'star',
      key: 'star',
      width: 100,
      render: val => val ? '是' : '否',
    }, {
      title: '添加方式',
      dataIndex: 'addType',
      key: 'addType',
      width: 100,
      render: val => val ? '主动添加' : '-',
    }, {
      title: '朋友圈权限',
      dataIndex: 'friendCirclePermission',
      key: 'friendCirclePermission',
      width: 200,
      render: val => friendCirlePermission[val],
    }, {
      title: '录入系统日期',
      dataIndex: 'ctime',
      key: 'ctime',
      width: 150,
    }, {
      title: '最后跟进时间',
      dataIndex: 'lastFollowUpTime',
      key: 'lastFollowUpTime',
      width: 100,
      render: val => val ? val : '-',
    }, {
      title: '备注',
      dataIndex: 'remark',
      key: 'remark',
      width: 100,
      render: val => val ? val : '-',
    }, {
      title: '操作',
      key: 'operator',
      width: 100,
      fixed: 'right',
      render: (val, record) => <Button type="primary" onClick={() => onCreateOrder(record)}><Link
        to={'/orderForm/' + record.id}>创建订单</Link></Button>,
    },
  ]

  const AnimateBody = (props) => {
    return <AnimTableBody {...props} />
  }

  const CommonBody = (props) => {
    return <tbody {...props} />
  }

  return (
    <Table
      {...tableProps}
      className={classnames(styles.table)}
      scroll={{x: 3000}}
      columns={columns}
      simple
      rowKey={record => record.id}
      components={{
        body: {wrapper: isMotion ? AnimateBody : CommonBody},
      }}
    />
  )
}

List.propTypes = {
  onDeleteItem: PropTypes.func,
  onEditItem: PropTypes.func,
  location: PropTypes.object,
}

export default List
